<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/base.css" rel="stylesheet">
    <link href="css/head.css" rel="stylesheet">

    <link href="css/add_pet.css" rel="stylesheet">
</head>

<body>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/head.js"></script>
    <script src="js/upload.js"></script>
    <script src="js/Utils.js"></script>

    <div class="head"></div>

    <div class="main">
        <div class="uploadBox" style="width:150px;height:150px;border:1px solid black;">
            <div class="image"></div>
        </div>

        <div class="form">
            <div>
                <span>名称</span>
                <input type="text" id="name">
            </div>
            <div>
                <span>类型</span>
                <select id="type"></select>
            </div>
            <div>
                <span>品种</span>
                <select id="kind"></select>
            </div>
            <div>
                <span>库存</span>
                <input type="text" id="stock">
            </div>
            <div>
                <span>价格</span>
                <input type="text" id="price">
            </div>

            <div>
                <span>简介</span>
                <textarea id="intro" style="width:87%;height:200px;resize: none;"></textarea>
            </div>

            <div>
                上架<input type="radio" name="added" value="1" checked>

                下架<input type="radio" name="added" value="0">
            </div>

            <div>
                <div id="add" class="button" style="width: 100%;">添加宠物</div>
            </div>

        </div>

    </div>

    <script>
        let image
        function uploadEven() {
            $('.uploadBox #upload').change(function (event) {
                let file = event.target.files[0]
                let imgRule = /image/

                let res = imgRule.test(file.type)
                
                let formData = new FormData()

                if (!res) {
                    alert("请上传图片文件")
                    return
                }

                formData.append('file', file)

                $.ajax({
                    data: formData,
                    type:'POST',
                    url: baseUrl + 'upload.php',
                    processData:false,
                    contentType:false,
                    success: function (res) {
                        if (typeof (res) == 'string')
                            res = JSON.parse(res)

                        if (res.code == 200) {
                            alert(res.msg)
                            image = res.data.imgUrl

                            $('.image').html(`
                                <img src="${baseUrl + image}">
                            `)
                        } else alert(res.msg)

                    }
                })
            })
        }

        function renderType() {
            //获取所有宠物的类别
            $.ajax({
                url: baseUrl + 'pet_types.php',
                type: 'GET',
                success: function (res) {
                    if (typeof (res) == 'string')
                        res = JSON.parse(res)

                    if (res.code == 200) {
                        data = res.data

                        if (data) {
                            for (let d of data) {
                                $('#type').append(`
                                    <option value="${d.id}">${d.type}</option>
                                `)
                            }
                        }
                    } else alert(res.msg)
                }
            })
        }

        function renderKind() {
            $.ajax({
                url: baseUrl + 'get_kinds.php',
                type: 'GET',
                success: function (res) {
                    if (typeof (res) == 'string')
                        res = JSON.parse(res)

                    if (res.code == 200) {
                        let data = res.data

                        if (data) {
                            for (let d of data) {
                                $('#kind').append(`
                                    <option value="${d.id}">${d.kind}</option>
                                `)
                            }
                        }
                    } else alert(res.msg)
                }
            })
        }

        function checkParameter() {
            let name = $("#name").val()

            let stock = $("#stock").val()
            let price = $("#price").val()
            let intro = $("#intro").val()

            let obj = {
                name, stock, price, intro, image
            }


            for (let k in obj) {
                if (obj[k] == "" || obj[k] == null) {
                    alert("请填写完整数据")
                    return false
                }
            }

            if (Number.isNaN(Number(price))) {
                alert("价格必须为数字")
                return false
            }

            else if (Number.isNaN(Number(stock))) {
                alert("库存必须为数字")
                return false
            }

            return true
        }


        function getAddedStatus() {
            let added = $('input:radio[name=added]').eq(0)[0]['checked']

            if (added) return "1"

            else return "0"
        }

        function addPet() {
            $("#add").click(function () {
                if (!checkParameter()) return

                let name = $("#name").val()

                let stock = $("#stock").val()
                let price = $("#price").val()
                let intro = $("#intro").val()

                let added = getAddedStatus()

                let type_selected_index = $("#type")[0].selectedIndex
                let kind_selected_index = $("#kind")[0].selectedIndex

                let type_id = $("#type")[0].options[type_selected_index].value
                let kind_id = $("#kind")[0].options[kind_selected_index].value

                data = {
                    name, type_id, kind_id, stock, price, added, intro, image
                }

                data = JSON.stringify(data)

                $.ajax({
                    data,
                    url: baseUrl + 'add_pet.php',
                    type: 'POST',
                    success: function (res) {
                        if (typeof (res) == 'string')
                            res = JSON.parse(res)

                        if (res.code == 200) {
                            alert(res.msg)

                            location.reload()
                        } else alert(res.msg)
                    }
                })
            })

        }

        function init() {
            uploadEven()
            renderKind()
            renderType()
            addPet()
        }

        $('document').ready(function () {
            init()

        })
    </script>
</body>

</html>